<template>
  <el-container>

    <!--  布局侧边栏  -->
    <el-aside :width="sideWidth + 'px'">
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
    </el-aside>

    <el-container>
      <vue-particles
          class="login-background"
          color="#97D0F2"
          :particleOpacity="0.8"
          :particlesNumber="100"
          shapeType="circle"
          :particleSize="4"
          linesColor="#97D0F2"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push">
      </vue-particles>
      <!--  顶部栏  -->
      <el-header>
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
      </el-header>

      <!--  主要部分  -->
      <el-main>
        <!--  表示当前页面的子路由会在 <router-view /> 里面展示  -->
        <router-view/>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>

import Aside from "@/components/Aside";
import Header from "@/components/Header";

// 不导入，request改为this.request
// import request from "@/utils/request";

export default {
  name: 'HomeView',
  data() {
    return {
      // 顶部折叠按钮默认值
      collapseBtnClass: 'el-icon-s-fold',
      // 默认未折叠
      isCollapse: false,
      // 边距默认值，防止导航栏出错
      sideWidth: 220,
      // 左上角标题展示默认值
      logoTextShow: true
    }
  },
  components: {
    Aside,
    Header
  },
  methods: {
    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {  // 展开
        this.sideWidth = 220
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
        //  line-height 垂直居中
      }
    }
  }
}
</script>

<style>

.el-container {
  min-height: 100vh
}

.el-aside {
  background-color: rgb(238, 241, 246);
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%)
}

.el-header {
  border-bottom: 1px solid #ccc;
}

.login-background {
  width: 100vh;
  height: 100%;
  z-index: -1;
  position: absolute;
  overflow: hidden;
}
</style>